import React from 'react';
import { WeaInputSearch, WeaLocaleProvider } from 'ecCom';
import ParamDialog from './ParamDialog';

const { getLabel } = WeaLocaleProvider;

const variables = [
  { name: getLabel(520738, '当前用户'), value: 'CURRUSER' },
  { name: getLabel(520739, '当前用户名称(中文)'), value: 'CURRUSERNAME' },
  { name: getLabel(520740, '当前部门'), value: 'CURRDEPT' },
  { name: getLabel(520741, '当前部门名称(中文)'), value: 'CURRDEPTNAME' },
  { name: getLabel(520742, '当前分部'), value: 'CURRDEPTSUB' },
  { name: getLabel(520743, '当前分部名称(中文)'), value: 'CURRDEPTSUBNAME' },
  { name: getLabel(520744, '当前岗位'), value: 'CURRJOBTITLE' },
  { name: getLabel(520745, '当前岗位名称(中文)'), value: 'CURRJOBTITLENAME' },
  { name: getLabel(520746, '当前用户工号'), value: 'CURRWORKCODE' },
  { name: getLabel(520747, '当前用户登录名(如:sysadmin)'), value: 'CURRLOGINID'},
  { name: getLabel(520748, '当前日期时间'), value: 'CURRDATETIME' },
  { name: getLabel(520749, '当前日期'), value: 'CURRDATE' },
  { name: getLabel(520750, '当前时间(时:分)'), value: 'CURRTIME' },
  { name: getLabel(520751, '当前时间(时:分:秒)'), value: 'CURRTIMESEC' },
  { name: getLabel(520862, '当前用户电话'), value: 'CURRTELEPHONE' },
  { name: getLabel(520863, '当前用户手机'), value: 'CURRMOBILE' },
  { name: getLabel(520864, '当前用户邮箱'), value: 'CURREMAIL' },
  { name: getLabel(520752, '获取参数'), value: 'param' },
  { name: 'UUID', value: 'UUID' }
]

export default class PopoverCont extends React.Component {
  search = React.createRef();
  
  constructor (props) {
    super(props);
	
    this.state = {
      filterVal: '',
      digVisible: false
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.visible !== this.props.visible && nextProps.visible) {
      this.setState({ filterVal: '' }, () => {
        ReactDOM.findDOMNode(this.search.current).querySelector('input').focus();
      });
    }
  }

  componentDidMount() {
    ReactDOM.findDOMNode(this.search.current).querySelector('input').focus();
  }
  
  insert = value => {
    const { insert } = this.props;

    if (value === 'param') {
      this.setState({ digVisible: true });
    } else {
      insert(`{${value}}`);
    }
  }

  onSure = value => {
    const { insert } = this.props;

    insert(`{${value}}`);
    this.setState({ digVisible: false });
  }

  onCancel = () => {
    this.setState({ digVisible: false });
  }
  
  render () {
    const { insert } = this.props;
    const { filterVal, digVisible } = this.state;

    return (
      <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@lrqw3e`}>
        <li>
          <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@7r986c`}
            ref={this.search}
            placeholder='Search'
            onSearch={val => this.setState({ filterVal: val })}
            value={filterVal}
          />
        </li>
        <div className='wea-edc-filed-title'>
        {
          variables.filter(variable => !!~variable.name.indexOf(filterVal)).map(variable => {
            return <li onClick={() => this.insert(variable.value)}>{variable.name}</li>
          })
        }
        </div>
        { 
          digVisible &&
          <ParamDialog ecId={`${this && this.props && this.props.ecId || ''}_ParamDialog@zwg7fk`} 
            visible={digVisible}
            onSure={this.onSure} 
            onCancel={this.onCancel}
          />
        }
      </React.Fragment>
    )
  }
} 